<template>
    <div>
        <el-form
            ref="form"
            :model="formData"
            :size="formSettingsData.size"
            :inline="formSettingsData.inline"
            :disabled="formSettingsData.disabled"
            :label-width="formSettingsData.labelWidth + 'px'"
            :show-message="formSettingsData.showMessage"
            :inline-message="formSettingsData.inlineMessage"
            :label-position="formSettingsData.labelPosition"
            :hide-required-asterisk="formSettingsData.hideRequiredAsterisk"
        >
            <form-item
                v-for="item in formControls"
                :key="item.type"
                :base-form-data="formData"
                :item="item"
                :style="formSettingsData.inline ? {display: 'inline-block'} : {}"
            />
        </el-form>
    </div>
</template>

<script>
import FormItem from "./FormItem";
export default {
    name: "TrendsForm",
    components: {FormItem},
    props: {
        formData: {
            type: Object,
            default: () => {}
        },
        formControls: {
            type: Array,
            default: () => []
        },
        formSettingsData: {
            type: Object,
            default: () => {}
        }
    }
}
</script>

<style scoped>

</style>
